<template>
    <div>
        <h3>{{userInfo.name}}</h3>
        <button @click="login">登录</button>
        <button @click="logout">退出登录</button>
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "My",
        created() {
            console.log(this.$store.state.user.isLogin)
            console.log(this.$store.state.user.userInfo)
            this.$store.dispatch("user/initUserInfo",{userInfo:{name:"李白"}})
        },
        computed:{
          ...mapState({
              userInfo:state => state.user.userInfo
          })
        },
        methods:{
            login(){
                this.$store.commit("user/changeLoginState",{isLogin:true})
            },
            logout(){
                this.$store.commit("user/changeLoginState",{isLogin:false})
            }
        }
    }
</script>

<style scoped>

</style>
